<template>
	<view class="form_box">
		<view class="d_box" v-if="!address_id">
			<textarea placeholder="粘贴信息自动识别" v-model="discernAddres"></textarea>
			<button  class="c_addres" @click="addressData">自动识别</button>
		</view>
		<view class="t_form">
			<view class="item">
				<text>*收货人</text>
				<input type="text" placeholder="请输入收货人姓名" v-model="form.name" />
			</view>
			<view class="item">
				<text>*联系电话</text>
				<input type="text" placeholder="请输入收货人联系电话" v-model="form.phone" />
			</view>
			<view class="item">
				<text>*所在地区</text>
				<picker mode="region" @change="regionChange" :value="form.region" class="picker">
				  <text class="region" v-if="form.region">{{form.region[0]}},{{form.region[1]}},{{form.region[2]}}</text>
				  <text class="region" v-else>选择省、市、区</text>
				</picker>
			</view>
			<view class="item">
				<text>*详细地址</text>
				<!-- <input type="text" placeholder="请输入街道小区楼层" v-model="form.detail" /> -->
				<textarea class="textarea fl" v-model="form.detail" placeholder="请输入街道小区楼层"></textarea>

			</view>

			<view class="item">
				<text>*选择分组</text>
				<picker @change="bindChange" :value="form.group_id" :range="group" range-key="name" class="picker">
					<view class="region">{{  group.length && group[index].name }}</view>
				</picker>
			</view>

			<view class="item_btn">
				<view class="item item_bg" v-if="!address_id">
					<button class="button wx_button btn-normal" @click="getWxTitle">获取微信地址</button>
				</view>
				<view class="item item_bg">
					<button class="button add_button btn-normal" @click="handleSend">保存地址信息</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		useAuthStore
	} from '@/stores/user.js';
	import {
		group_list,
		descern_address,
		add_address,
		save_address,
		edit_address
	} from "@/api/address.js"


	const form = ref({
		group_id: "0"
	})
	const address_id = ref(null);
	const index = ref(0);
	const group = ref([]);
	const discernAddres = ref(null);
	

	// 编辑
	onLoad((option) => {
		get_group();
		address_id.value = option.address_id
		
		
	})
	
	// 获取地址分组
	function get_group() {
		group_list().then(res => {
			let data = res.data;
			group.value = data.list;
			group.value.unshift({id: "0",  name: "未分组"})
			
			if (address_id.value) get_address_detail(address_id.value)
		})
	}
	
	function bindChange(e) {
		index.value = e.detail.value;
		form.value.group_id = group.value[e.detail.value].id;
	}
	
	// 选择地区取值
	function regionChange(e){
		let name = form.value.name,
			phone = form.value.phone,
			detail = form.value.detail;
			form.value.name = name
			form.value.phone = phone
			form.value.detail = detail
			form.value.region = e.detail.value
			form.value.code = e.detail.code
	}


	// 获取微信地址信息
	function getWxTitle() {
		uni.chooseAddress({
			success(res) {
				form.value.region = [res.provinceName, res.cityName, res.countyName]
				form.value.name = res.userName
				form.value.phone = res.telNumber
				form.value.detail = res.detailInfo
			}
		})
	}

	// 保存信息
	function handleSend() {
		// 验证表单		
		let phone = validatePhoneNumber(form.value.phone),
			region = Boolean(form.value.region[0]);
		if (!form.value.name) {
			COMMON.Toast(`收货人姓名不能为空`);
			return false
		}else if (!phone) {
			COMMON.Toast(`请输入正确的电话号码`);
			return false;
		}else if (!region) {
			COMMON.Toast(`请选择地区`);					
			return false;
		}else if(!form.value.detail) {
			COMMON.Toast(`详细地址不能为空`);
			return false;
		}
		
		

		if (address_id.value) {
			// 编辑保存
			save_address(form.value).then(res => {
				COMMON.re_back(res)
			})
		} else {
			// 添加保存
			add_address(form.value).then(res => {
				COMMON.re_back(res)
			})
		}
	}



	// 获取编辑详情
	 function get_address_detail(address_id) {
		edit_address(address_id).then(res => {
			let data = res.data;
			for (let i = 0; i < group.value.length; i++) {
				if (data.group_id == group.value[i].id) {
					index.value = i;
				}
			}
			
			form.value = data;
		})
	}
	
	// 自动识别地址
	function addressData(){
		descern_address(discernAddres.value).then(res => {
			let data = res.data;
			form.value.region = [data.province, data.city, data.area]
			form.value.name = data.name
			form.value.phone = data.mobile
			form.value.detail = data.details
		})
	}
	
	
	function validatePhoneNumber(phone) {
	  // 手机号正则表达式
	  const mobileRegex = /^1[3-9]\d{9}$/;
	  // 固定电话正则表达式
	  const landlineRegex = /^(0\d{2,3}-?\d{7,8})$/;
	  let flag = false;
		
	  if (mobileRegex.test(phone)) {
	    flag = true
	 } else if (landlineRegex.test(phone)) {
	   flag = true
	 } else {
	    flag = false
	  }
	  
	  return flag
	}
	
</script>

<style lang="scss" scoped>
	@import '@/static/css/form.scss';
	.fl{
		float: left;
	}
	
	.d_box{
		width: 100%;
		margin:20rpx auto 0;
		padding: 20rpx;
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		textarea{
			width: 70%;
			float: left;
			height: 200rpx;
			padding: 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
		button{
			width: 30%;
			float: right;
			margin-top: 50rpx;
			font-size: 28rpx;
			padding: 10rpx 0;
			box-sizing: border-box;
			color: #fff;
			border-radius: 50px;
			background: linear-gradient(to right, #f9211c, #ff6335);
		}
	}
</style>